	@import '@/styles/mixin.scss';
	.home-wrap{
		min-height: 100vh;
		background-color: #eaeaea;
		.topTitle{
			@include toptitle;
			.fract{
				align-items: center;
				font-size: 0.75rem;
				span{
					max-width: 8.12rem;
				}
				a{
					display: inline-block;
					width:2.5rem;
					height: 1.5rem;
					margin-left: 0.25rem;
					line-height: 1.5rem;
					text-align: center;
					border: 1px solid #fff;
					color: #fff;
					border-radius: 0.25rem;
				}
			}
		}
		.halllist{
			padding: 0.93rem 0 .5rem;
			.h_title{
				padding: 0 0.93rem;
				position:relative;
				.icon{
					display: inline-block;
					width: 1.25rem;
					height: 1.25rem;
					vertical-align: middle;
					margin-right: 0.62rem;
					margin-bottom: 3px;
				}
				.live_class{
					background: url(../../assets/images/live_class.png);
					background-size: contain;
				}
				h2{
					font-size: 1rem;
					color: #222;
					-webkit-text-stroke:.24px;
				}
				.more-list{
					position: absolute;
					right: 0.93rem;
					top: -1px;
					color: #666;
					width: 3.25rem;
					height: 1.5rem;
					line-height: 1.5rem;
					border: 1px solid #666;
					text-align: center;
					border-radius: 1.5rem;
				}
			}
			.room-list-ul{
				.loading{
					padding: 0.62rem 0;
					font-size: 0.87rem;
					color: #000;
					text-align: center;
					.loading-img{
						width:1.25rem;
						height: 1.25rem;
						margin-right: 0.62rem;
						vertical-align: middle;
					}
				}
				ul{
					padding:0 0.465rem;
					li{
						float: left;
						position: relative;
						width: 50%;
						margin-top: 0.93rem;
						border-radius:0.31rem;
						font-size: 0.75rem;
						min-height:9.25rem;
						.img{
							position: absolute;
							left: 0.465rem;
							right: 0.465rem;
							overflow: hidden;
							background-color:#fff;
							.password_bg{
								position: absolute;
								top: 0.62rem;
								left: 0.62rem;
								width: 1rem;
								height: 1rem;
								background: url(../../assets/images/room-password-icon.png) no-repeat;
								background-size: contain;
							}
							// border-radius: 0.31rem 0.31rem 0 0;
							img{
								width: 100%;
								height: 5rem;
								// border-radius: 0.31rem 0.31rem 0 0;
								border-style: none;
							}
							.txt{
								padding: 0 0.62rem;
								color: #666;
								line-height: 1.75rem;
								&:first-of-type{
									padding-top: 0.25rem;
									margin-bottom: 0.12rem;
								}
								&:last-child{
									padding-bottom: 0.12rem;
								}
								.name{
									max-width: 60%;
									float: left;
									height: 1.75rem;
									color: #222;
									font-size: 13px;
								}
								.v{
									float: left;
									width: 2.37rem;
									height: 1.25rem;
									line-height: 1.25rem;
									margin: 0.18rem 0.25rem 0 0;
									text-align: center;
									border: 1px solid #148BE4;
									color: #148BE4;
									font-weight: normal;
								}
								.v.m{
									border: 1px solid #FF7900;
									color: #FF7900;
								}
								.live_color{
									color: #f4120e !important;
								}
								.gray_dot_bg, .red_dot_bg{
									display: inline-block;
									width: 1rem;
									height: 1rem;
									vertical-align: middle;
									margin: -.125rem 0.37rem 0 0;
								}
								.red_dot_bg{
									background: url(../../assets/images/mobile_live.png);
									background-size: contain;
								}
								.gray_dot_bg {
									background: url(../../assets/images/mobile_xiuxi.png);
									background-size: contain;
								}
								.people-number{
									max-width: 4.37rem;
									color: #9f9f9f;
									i{
										display: inline-block;
										width:0.87rem;
										height:0.87rem;
										vertical-align: middle;
										background: url(../../assets/images/mobile_people.png) no-repeat;
										background-size: contain;
										margin: -0.31rem 0.37rem 0 0;
									}
								}
							}
						}
					}
				}
			}
		}
	}